<!DOCTYPE html>
<html>
    <head>
        <style type="test/css">
        #div1 {
            width:198px; height:66px;padding:10px;border:1px solid #aaaa;
        }
        </style>
        <script tyep="text/javascript">
        function allowDrop(ev){
            ev.preventDefault();
        }
        function drag(ev){
            ev.dataTransfer.setData("Text",ev.target.id);
        }
        function drop(ev)
        {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }
        </script>
    </head>
    <body>
        <p>
                请把 W3School 的图片拖放到矩形中：
        </p>
        <div id="div1" style="width:100px;height:65px; border:2px solid red" ondrop="drop(event)"
            ondragover="allowDrop(event)">
           
        </div>
        <img id="drag1" src="./../2.jpg" style=" height: 65px;
        width: 100px"
        draggable="true" ondragstart="drag(event)"/ >
    </body>
</html>